<template>
    <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>后台管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 用户列表主体 -->
    <el-card>
        <el-row :gutter="25">
        <!-- 搜索区域 -->
         <!-- 搜索添加 -->
          <el-col :span="10" class="first">
            <!-- 通过输入栏内容传值到 v-model="queryInfo.query" 中就有模糊查询 -->
            <!-- @clear="getUserList"为清除方法，调用getUserList显示用户信息 -->
          <el-input placeholder="请输入搜索内容" v-model="queryInfo.query" clearable @clear="getUserList"></el-input>
          </el-col>
          <el-col class="second">
          <el-button  icon="el-icon-search" @click="getUserList"></el-button>
          </el-col>

          <!-- 搜索按钮 -->
          <el-col :span="4" class="third">
           <el-button type="primary" @click="addDialogVisible = true">添加用户</el-button>
          </el-col>
        </el-row>
        <!-- 用户列表 border边框 stripe隔行变色 -->
        <!-- 数据绑定很重要！！！ :data="userList" 别忘了加冒号！！！ -->
        <el-table :data="userList" border stripe>
          <!-- 索引列 -->
          <el-table-column type="index"></el-table-column>
          <el-table-column label="用户名" prop="username"></el-table-column>
          <el-table-column label="密码" prop="password"></el-table-column>
          <el-table-column label="邮箱" prop="email"></el-table-column>
          <el-table-column label="角色" prop="role"></el-table-column>
          <el-table-column label="状态" prop="state">
            <!-- 作用域插槽 -->
            <template slot-scope="scope">
              <!-- {{scope.row}} 为每一行封存的数据 -->
              <el-switch v-model="scope.row.state" @change="userStateChanged(scope.row)"></el-switch>
            </template>
          </el-table-column>
          <el-table-column label="操作">
             <template slot-scope="scope">
            <!-- 修改 -->
            <el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog(scope.row.id)"></el-button>
            <!-- 删除 -->
            <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteUser(scope.row.id)"></el-button>
            <!-- 权限 -->
            <el-tooltip effect="dark" content="分配权限" placement="top-start" :enterable="false"><!--文字提示 enterable 隐藏-->
              <el-button type="warning" icon="el-icon-setting" size="mini"></el-button>
            </el-tooltip>
          </template>
          </el-table-column>
        </el-table>

        <!-- 分页组件 size-change每页最大变化 current-change当前最大变化 layout功能组件-->
        <div>
          <!-- 选中整段按TAB右移，按SHIFT+TAB左移 -->
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryInfo.pageNum"
            :page-sizes="[1, 3, 5, 10, 20]"
            :page-size="queryInfo.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>
    </el-card>
    <!-- 新增用户区域 -->
    <el-dialog title="添加用户" :visible.sync="addDialogVisible" width="50%" @close="addDialogClosed" class="dialog">
      <!-- 此处form表单可通过 ref="addFormRef" 设置后在下面方法引用 -->
      <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="70px">
        <!-- 用户名 -->
        <el-form-item label="用户名" prop="username">
          <el-input v-model="addForm.username"></el-input>
        </el-form-item>
         <!-- 密码 -->
        <el-form-item label="密码" prop="password">
          <el-input v-model="addForm.password"></el-input>
        </el-form-item>
         <!-- 邮箱 -->
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="addForm.email"></el-input>
        </el-form-item>
      </el-form>
      <!-- 内容底部区域 -->
        <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addUser">确 定</el-button>
      </span>
    </el-dialog>

     <!-- 修改对话框 -->
    <el-dialog title="修改用户" :visible.sync="editDialogVisible" width="50%" @close="editDialogClosed" class="dialog">
      <!-- 此处form表单可通过 ref="addFormRef" 设置后在下面方法引用 -->
      <el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="70px">
        <!-- 用户名 -->
        <el-form-item label="用户名" prop="username">
          <el-input v-model="editForm.username" disabled></el-input>
        </el-form-item>
         <!-- 密码 -->
        <el-form-item label="密码" prop="password">
          <el-input v-model="editForm.password"></el-input>
        </el-form-item>
         <!-- 邮箱 -->
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="editForm.email"></el-input>
        </el-form-item>
      </el-form>
      <!-- 内容底部区域 -->
        <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editUserInfo">确 定</el-button>
      </span>
    </el-dialog>
    </div>
</template>
<script>
export default{
  created(){
    this.getUserList();

  },
  data(){
    return{
      //查询信息实体
      queryInfo:{
        query:"",//查询信息
        pageNum: 1,//当前页
        pageSize: 5,//每页最大数(初始化) 必须在 :page-sizes="[1, 3, 5, 10, 20]" 里面选择其中一个，而里面的最大数也是自定义！
      },
      userList:[],//用户列表
      total: 0,//总记录数
      addDialogVisible: false,//对话框状态
      //添加表单信息
      addForm:{
        username:'',
        password:'',
        email:'',       
      },
      // 修改用户信息
      editForm:{
        //显示/隐藏修改用户栏
        

      },
      editDialogVisible:false,
      //添加的表单验证
      addFormRules: {
          username: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
            { min: 3, max: 12, message: '长度在 3 ~ 12 个字符', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 6, max: 14, message: '长度在 6 ~ 14 个字符', trigger: 'blur' }
          ],
          email: [
            { required: true, message: '请输入邮箱', trigger: 'blur' },
            { min: 5, max: 15, message: '请输入正确邮箱地址', trigger: 'blur' }
          ]
        },
      //修改的表单验证
      editFormRules:{
        password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 6, max: 14, message: '长度在 6 ~ 14 个字符', trigger: 'blur' }
          ],
          email: [
            { required: true, message: '请输入邮箱', trigger: 'blur' },
            { min: 5, max: 15, message: '请输入正确邮箱地址', trigger: 'blur' }
          ]
      },


    }
  },
  methods:{
    //获取所有用户
    async getUserList(){
       const {data:res} = await this.$http.get("allUser",{params:this.queryInfo});
       this.userList = res.users;//用户列表数据封装
       this.total = res.numbers;//总用户数封装
    },
    // 最大数
    handleSizeChange(newSize){
      this.queryInfo.pageSize = newSize;
      this.getUserList();
    },
    // pageNum的触发动作
    handleCurrentChange(newPage){
      this.queryInfo.pageNum = newPage;
      this.getUserList();
    },
    async userStateChanged(userInfo){
      const {data:res} =  await this.$http.put(`userState?id=${userInfo.id}&state=${userInfo.state}`);
      if(res!="success"){
        userInfo.id = !userInfo.id;
        return this.$message.error("操作失败！");
      }
      this.$message.success("操作成功！")

    },
    //监听添加用户
    addDialogClosed(){
      this.$refs.addFormRef.resetFields();
    },
    addUser(){
      this.$refs.addFormRef.validate(async valid=>{
        if(!valid) return;
        const {data:res} = await this.$http.post("addUser",this.addForm);
        if(res!="success"){
          return this.$message.error("添加失败！");
        }
        this.$message.success("添加成功！")
        this.addDialogVisible = false;
        this.getUserList();
      });
    },
    //根据主键删除用户
    async deleteUser(id){
      const confirmResult = await this.$confirm('此操作将永久删除用户，是否继续？','提示',{
        confirmButtonText:'确定',
        cancelButtonText:'取消',
        type:'warning'
      }).catch(err => err)
    if(confirmResult!='confirm'){//取消
      return this.$message.info("已取消删除");
    }
    const {data:res} = await this.$http.delete("deleteUser?id="+id);
    if(res != "success"){
      return this.$message.error("删除失败！");
    }
    this.$message.success("删除成功！");
    this.getUserList();
    },

    //显示对话框
    async showEditDialog(id){
      const {data:res} = await this.$http.get("getUpdate?id="+id);
      this.editForm = res;//查询出来的用户信息反填回编辑表单
      this.editDialogVisible = true;//开启编辑对话框
    },
    //关闭窗口
    editDialogClosed(){
      this.$refs.editFormRef.resetFields();//重置信息
    },
    //确认修改
    editUserInfo(){
      this.$refs.editFormRef.validate(async valid =>{
        if(!valid) return;
        //发起修改请求
        const {data:res} = await this.$http.put("editUser",this.editForm);
        if(res!="success")return this.$message.error("修改失败！");
        this.$message.success("修改成功！");
        //隐藏对话框
        this.editDialogVisible = false;
        this.getUserList();
      })
    }


  
  },
};
</script>
<style scoped>
/* 面包屑样式 */
.el-breadcrumb{
    font-size: 15px;
    height: 30px;
    margin: -5px;
}
div{
  display: block;
  position: relative;
}
.first{
  margin-top: -10px;
}
.second{
  width: 60px;
  margin-top: -10px;
  margin-left: -25px;
}
.third{
  width: 100px;
  margin-top: -10px;
  flex: auto;
}
.el-switch{
  height: 22px;
}
.dialog{
  margin-top: -350px;
}




</style>